<template>
    <div class="loginMainContainer">
        <div class="loginMainType">
            <div class="loginMainTypeText" :class="loginType?'disactive':'active'" @click="loginType=0">密码登陆</div>
            <div class="loginMainTypeText" :class="loginType?'active':'disactive'" @click="loginType=1">短信登陆</div>
        </div>
        <div class="loginMainForm">
            <div class="loginMainUser">
                <div class="loginMainUserLogo"></div>
                <div class="loginMainUserTextF">
                    <input type="search" class="loginMainUserText" placeholder="请输入电话" v-model='submitData.account'>
                </div>
            </div>
            <div class="loginMainPwd">
                <div class="loginMainPwdLogo" :class='loginType?"loginMainPwdType":"loginMainCodeType"' ></div>
                <div class="loginMainPwdTextF">
                    <input :type="loginType || passWordType ? 'text':'password'" 
                        :placeholder="loginType?'请输入验证码':'请输入密码'" 
                        class="loginMainPwdText" 
                        v-model='submitData.password'
                        >
                    <div class="loginMainGetCode" 
                        v-show=loginType 
                        :class="userNameValidate?'canSubmit':''"
                        @click="getPhoneCode">获取验证码</div>
                </div>
            </div>
        </div>
        <div class="loginMainSubmitF">
            <div class="loginMainSubmit" :class="userNameValidate && passWordValidate?'canSubmit':''" @click="loginType?signUpSubmit():loginSubmit()">立即登录</div>
        </div>
    </div>    
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            //0为密码登录，1为短信登录
            loginType:0,
            passWordType:0,
            userNameValidate:0,
            passWordValidate:0,
            submitData:{
                account:'',
                password:''
            }
        }
    },
    methods:{
        loginSubmit(){
            if(this.userNameValidate && this.passWordValidate){
                axios({
                    method:'POST',
                    url:'/api/loginAndReg/loginByAccount',
                    data:{
                        'account':this.submitData.account,
                        'password':this.submitData.password
                    },
                }).then((result) => {
                    console.log(result);
                }).catch((err) => {
                   console.log(err); 
                });
            }
        },
        getPhoneCode(){
            if(this.userNameValidate){
                axios({
                    method:'POST',
                    url:'/api/loginAndReg/sendSmsCode',
                    data:{
                        'phoneNumber':this.submitData.account.toString()
                    },
                }).then((result) => {
                    console.log(result);
                }).catch((err) => {
                   console.log(err); 
                });
            }
        },
        signUpSubmit(){
             if(this.userNameValidate && this.passWordValidate){
                axios({
                    method:'POST',
                    url:'/api/loginAndReg/loginByMobile',
                    data:{
                        'phoneNumber':this.submitData.account,
                        'smsCode':this.submitData.password,
                        "refereeCompId": "string",
                        "refereeUserId": "string",
                    },
                }).then((result) => {
                    console.log(result);
                }).catch((err) => {
                   console.log(err); 
                });
            }
        }
    },
    watch:{
        'submitData.account':function(){
            if(!(/^1[34578]\d{9}$/.test(this.submitData.account))){ 
                this.userNameValidate = 0
            }else{
                this.userNameValidate = 1
            }
        },
        'submitData.password':function(){
           if(this.submitData.password.length < 4){
               this.passWordValidate = 0
           }else{
               this.passWordValidate = 1
           }
        }
    }
}   
</script>

<style>
.loginMainType{
    margin: 0.6rem 1.65rem 0 1.49rem;
    padding-bottom: 0.5rem;
    margin-left: 1.49rem;
    margin-right: 1.65rem;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}
.loginMainTypeText{
    font-size: 0.32rem;
    color: #8a94a6
}
.loginMainUser,.loginMainPwd,.loginMainPwdText{
    display: flex;
    /* align-items: flex-end; */
}
.loginMainForm{
    margin-top: 0.34rem;
}
.loginMainUserLogo{
    margin-left: 0.27rem;
    width: 0.32rem;
    height: 0.4rem;
    background-image: url("../../assets/logo/01_login_phone.png");
    background-size: 0.32rem 0.4rem;
}
.loginMainUserTextF{
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px rgba(7, 17, 27, 0.2) solid;
    padding-bottom: 0.1rem;
    margin-left: 0.3rem;
    width: 85%;
    height: 0.72rem;
    
}
.loginMainUserText{
    border: none;
    outline: none;
    position: relative;
    bottom: 0.72rem;
    width: 100%;
    
}
.loginMainUser{
    margin-right: 0.27rem;
    height: 0.72rem;
}
.loginMainGetCode{
    font-size: 0.2rem;
}
.loginMainPwdLogo{
    width: 0.38rem;
    height: 0.42rem;
    margin-left: 0.26rem;
    background-size: 0.38rem 0.42rem;
    margin-top: 0.15rem;
}
.loginMainPwd{
    margin-top: 0.65rem;
    height: 0.72rem;
    margin-right: 0.27rem;
}
.loginMainPwdTextF{
     border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px rgba(7, 17, 27, 0.2) solid;
    padding-bottom: 0.1rem;
    margin-left: 0.28rem;
    width: 85%;
    height: 0.72rem;
    display: flex;
    justify-content: space-between;
    
}
.loginMainPwdText{
    border: none;
    outline: none;
    position: relative;
}
.loginMainGetCode{
    width: 1.62rem;
    height: 0.56rem;
    background-color: #EAEAEA;
    color: rgba(141, 141, 141, 0.5);
    font-size: 0.24rem;
    border-radius: 0.24rem;
    text-align: center;
    line-height: 0.56rem;
    margin-top: 0.15rem;
}
.loginMainSubmitF{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 0.75rem;
}
.loginMainSubmit{
    width:5.89rem;
    height: 0.84rem;
    background-color: #EAEAEA;
    color: rgba(141, 141, 141, 0.5);
    font-size: 0.32rem;
    line-height: 0.84rem;
    text-align: center;
    border-radius: 0.42rem;
}
.active{
    color: #0070c8;
    border-bottom: 2px solid #0070cb;
    border-radius: 1px;
    padding-bottom: 0.3rem;
}
.canSubmit{
    color: #ffffff;
    background: linear-gradient(to right,#47a9d6,#7fd7ff);
    box-shadow: 0 0 12px #47a9d6 ;
}
.loginMainPwdType{
    background-image: url('../../assets/logo/01_login_code.png');
}
.loginMainCodeType{
    background-image: url('../../assets/logo/02_login_pw.png');
}
</style>
